<template>
  <view class="app">
    <view class="search-btn mix-icon icon-shuxiangliebiao" @click="navSearch"
      >筛选</view
    >
    <view class="page-tip">货源列表</view>
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <view class="fixed-btn">
      <mix-button
        ref="confirmBtnNG"
        text="批量拒单"
        :isConfirm="false"
        class="btn-default"
        @onConfirm="showPopup('mixModal')"
      ></mix-button>
      <mix-button
        ref="confirmBtnOK"
        text="批量接单"
        :isConfirm="false"
        style="width: 320rpx"
        @onConfirm="showPopup('mixModal')"
      ></mix-button>
    </view>

    <!-- 支付密码键盘 -->
    <pay-password-keyboard
      ref="pwdKeyboard"
      @onConfirm="balancePay"
    ></pay-password-keyboard>
    <mix-loading v-if="isLoading"></mix-loading>

    <mix-modal
      ref="mixModal"
      title="提示"
      text="该功能需登录才能使用，是否登录?"
      @onConfirm="logout"
    ></mix-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  onLoad() {},
  methods: {
    navSearch() {
      uni.navigateBack();
    },
    logout() {
      //余额支付 打开支付密码键盘
      this.$refs.pwdKeyboard.open();
      this.$refs.confirmBtnNG.stop();
    },
  },
};
</script>

<style>
page {
  background: #f7f8f9;
}
</style>
<style scoped lang="scss">
.app {
  padding-top: 15vh;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url("../../static/page_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 600rpx;
}
.search-btn {
  position: absolute;
  left: 20rpx;
  top: calc(var(--status-bar-height) + 20rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 32rpx;
  color: white;
}
.page-tip {
  position: absolute;
  left: 50%;
  top: calc(var(--status-bar-height) + 44rpx);
  z-index: 90;
  margin-left: -80rpx;
  font-size: 34rpx;
  color: white;
  line-height: 34rpx;
}
.wrapper {
  position: relative;
  z-index: 90;
  padding-bottom: 40rpx;
}
.fixed-btn {
  position: absolute;
  left: 0;
  bottom: 6vh;
  z-index: 1;
  width: 100%;
  height: 90rpx;
  font-size: 24rpx;
  color: #999;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}
.btn-default {
  width: 320rpx;
  background-color: white;
  border: 1px solid #f75248;
  color: #f5473b;
  &:after {
    background: linear-gradient(151deg, white 0%, rgb(240, 236, 236) 100%);
  }
}
</style>
